<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: adminHeader(~{::title})">
    <link rel="stylesheet" type="text/css" href="../../static/semantic.min.css" th:href="@{/semantic.min.css}">
    <script
            src="https://code.jquery.com/jquery-3.1.1.min.js"
            integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"></script>
    <script src="../static/semantic.min.js" th:href="@{/semantic.min.js}"></script>
    <meta charset="UTF-8">
    <title>分类管理</title>
</head>
<body>
<div class="ui borderless inverted main menu" th:replace="_fragments :: adminMenu(2,blue)">
    <div class="ui huge inverted text container">
        <a class="item" href="index.html" th:href="@{/admin/index}">
            <i class="home icon"></i> 主页
        </a>
        <a class="item active orange" href="category.html" th:href="@{/admin/category}">
            <i class="folder icon"></i> 分类
        </a>
        <a class="item" href="tags.html" th:href="@{/admin/tags}">
            <i class="tags icon"></i> 标签
        </a>
    </div>
</div>
<div class="ui borderless grid">
    <div class="ui two wide column"></div>
    <div class="ui eleven wide column">
        <div class="ui container">
            <div class="ui container" th:fragment="list">

                <!--查询列-->
                <table class="ui celled table" th:if="${#request.getRequestURI() == '/admin/category'}">
                    <a href="#" th:href="@{/admin/category/edit}" class="ui teal right floated button">新增</a>
                    <div class="field">
                        <table class="ui table">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>分类名称</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="category,iterStat : ${categoryList}">
                                <td th:text="${iterStat.count}">1</td>
                                <td th:text="${category.getName()}">Java编程语言</td>
                                <td>
                                    <a href="#" th:href="@{/admin/category/edit?id={id}(id=${category.id})}"
                                            class="ui right mini teal basic button">编辑
                                    </a>
                                    <button class="ui mini red basic button delete" type="submit"
                                       th:value="${category.id}">删除</button>
                                    <!--                                    <a href="#" th:href="@{/admin/category/del/{id}(id=${category.id})}"
                                                                           class="ui right mini red basic button">删除</a>-->
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </table>
                <!--新增或编辑-->
                <div class="ui container" th:if="${#strings.contains(#request.getRequestURI(),'edit')}" >
                    <form action="#" method="post" th:object="${category}"
                          th:action="*{id} == null ? @{/admin/category/edit} : @{/admin/category/edit?id={id}(id=*{id})}"
                          class="ui form" id="ajaxForm">
                        <input type="hidden" name="id" th:value="*{id} ">
                        <div class="ui required left icon fluid input">
                            <i class="list ul icon"></i>
                            <input type="text" name="name" placeholder="分类名称" th:value="*{name}">
                            <a class="ui right grey button" th:href="@{/admin/category}">返回</a>
                            <button class="ui right submit teal button" type="submit">提交</button>
                        </div>
                        <div class="ui error message"></div>
                        <div class="ui negative message" th:if="${#fields.hasErrors('name')}">
                            <i class="close icon"></i>
                            <div class="header">验证失败</div>
                            <p th:errors="*{name}">提交信息不符合规则</p>
                        </div>
                        <div class="ui negative message" th:unless="${#strings.isEmpty(message)}"
                             th:text="${message}"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="ui three wide column"></div>
</div>
<script>

    $(".ui.mini.red.basic.button.delete").click(function () {
        var bool = confirm("确定删除?");
        if (bool) {
            var id = $(this).attr("value");//获得参数的值
            var url = "/admin/category/del/" + id;
            $.get(url, function (data, status) {
                window.location.reload();
                alert("删除成功");
            });
        } else {
            return;
        }

    });

    /*
    * 下面是提交表单跳转
     */

   /* $(      //页面加载完执行
        $("#ajaxForm").on("submit",function () {    //表单提交时监听提交事件
            $(this).ajaxSubmit(options);    //当前表单执行异步提交，optons 是配置提交时、提交后的相关选项
            return false;   //  必须返回false，才能跳到想要的页面
        })
    )
    //配置 options 选项
    var options = {
        //url: "/postform",       //提交地址：默认是form的action,如果申明,则会覆盖
        //type: "post",           //默认是form的method（get or post），如果申明，则会覆盖
        success: successFun,    //提交成功后的回调函数，即成功后可以定页面跳到哪里
        dataType: "json",       //接受服务端返回的类型
        clearForm: true,        //成功提交后，清除所有表单元素的值
        resetForm: true,        //成功提交后，重置所有表单元素的值
        timeout: 3000           //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)
    }
    //设置提交成功后返回的页面
    function successFun(data,status) {
        $.get("/admin/category", function (data, status) {
            window.location.reload();
            alert("操作成功");
        })
    }*/

</script>
</body>
</html>